<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>物流大数据展示系统</title>
		<link rel="stylesheet" href="colorui/icon.css">
		<link rel="stylesheet" href="colorui/main.css">
		<link rel="stylesheet" href="colorui/animation.css">

		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>

	</head>
	<body>




		<div class="cu-list  bg-white ">
			<div class="cu-item padding-tb-xs ">


				<div class="flex justify-start">

					<img class="radius margin-lr-sm"
						src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" width="120" alt="">

					<div class="content margin-lr-sm">
						<div style="height: 60px;overflow-y:scroll;width: 100%;">
							这是标题这是标题这这是标题这是标题这这是标题这是标题这这是标题这是标题这这是标题这是标题这
						</div>

						<div class="text-gray text-sm flex">
							<div class="text-cut">
								2021-10-11 09:41
							</div>
						</div>
					</div>



				</div>



			</div>
		</div>








		<style type="text/css">
			.seckill-box {
				padding: 15px 10px;
				background: #fff;
				border-radius: 10px;
			}


			.seckill-box .hd .left,
			.seckill-box .hd {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}

			.seckill-box .hd {
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
			}

			.seckill-box .hd .left,
			.seckill-box .hd {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}

			.seckill-box .hd .left img {
				width: 18px;
				height: 18px;
				margin-right: 5px;
				border-radius: 50%;
			}

			.content img {
				display: block;
				max-width: 100%;
				-o-object-fit: contain;
				object-fit: contain;
			}


			.seckill-box .hd .left p {
				font-size: 16px;
				color: #282828;
				font-weight: 600;
			}

			.seckill-box .hd .left .time {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				margin-left: 5px;
				color: #f44;
			}

			.seckill-box .hd .left .time span {
				width: 20px;
				height: 16px;
				font-size: 12px;
				text-align: center;
				line-height: 16px;
			}

			.seckill-box .list-wrapper {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				margin-top: 8px;
				overflow: hidden;
			}

			.seckill-box .list-wrapper .list-item {
				-ms-flex-negative: 0;
				flex-shrink: 0;
				width: 110px;
				background-color: #fff;
			}

			.seckill-box .list-wrapper .list-item .img-box {
				position: relative;
				width: 100%;
				height: 110px;
			}


			.empty-box {
				width: 100%;
				height: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				background: #f3f5f7;
				border-radius: 6px;
			}

			.seckill-box .list-wrapper .list-item .img-box .discount {
				position: absolute;
				left: 8px;
				bottom: 8px;
				height: 18px;
				padding: 0 3px;
				line-height: 18px;
				background: #fff;
				border-radius: 2px;
				border: 1px solid transparent;
				font-size: 12px;
			}


			.seckill-box .list-wrapper .list-item .title {
				margin-top: 5px;
				font-size: 13px;
				color: #282828;
				padding: 0 3px;
			}

			.seckill-box .list-wrapper .list-item .price {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				padding: 0 3px;
			}

			.seckill-box .list-wrapper .list-item .price .label {
				font-size: 9px;
				width: 16px;
				height: 16px;
				color: #fff;
				text-align: center;
				line-height: 16px;
			}

			.seckill-box .list-wrapper .list-item .price .num-label {
				color: #f44;
				font-size: 12px;
				font-weight: 600;
				margin: 1px 2px 0;
			}

			.seckill-box .list-wrapper .list-item .price .num {
				color: #f44;
				font-size: 16px;
				font-weight: 600;
			}
		</style>

		<div class="seckill-box" style="margin-top: 0px; background: rgb(255, 255, 255);">
			<div class="hd">
				<div class="left"><img src="http://pro.crmeb.net/static/images/spike-icon-002.gif">
					<p>限时秒杀</p>
					<div class="time"><span
							style="background: rgba(252, 60, 62, 0.09); color: rgb(233, 51, 35);">00</span><em>:</em><span
							style="background: rgba(252, 60, 62, 0.09); color: rgb(233, 51, 35);">00</span><em>:</em><span
							style="background: rgba(252, 60, 62, 0.09); color: rgb(233, 51, 35);">00</span></div>
				</div>
				<div class="right">
					更多
				</div>
			</div>
			<div class="list-wrapper" style="overflow-x: scroll;">
				<div class="list-item" style="margin-right: 10px;">
					<div class="img-box">


						<img width="100" height="100"
							src="https://img.alicdn.com/imgextra/i1/2793447635/O1CN019Evc6x26GsccXdUxQ_!!2793447635.jpg"
							alt="">

						<div class="discount" style="border-color: rgb(233, 51, 35); color: rgb(233, 51, 35);">
							1.2折起
						</div>
					</div>
					<div class="title line1 margin-bottom-xs">小米家用电饭煲小米家用电饭煲</div>
					<div class="price"><span class="label" style="background: rgb(233, 51, 35);">抢</span><span
							class="num-label" style="color: rgb(233, 51, 35);">￥</span><span class="num"
							style="color: rgb(233, 51, 35);">234</span></div>
				</div>

				<div class="list-item flex-wrap" style="margin-right: 10px;">
					<div class="img-box">


						<img width="100" height="100"
							src="https://img.alicdn.com/imgextra/i1/725677994/O1CN01OOdyGx28vIqlmfapD_!!725677994.jpg"
							alt="">

						<div class="discount" style="border-color: rgb(233, 51, 35); color: rgb(233, 51, 35);">
							1.2折起
						</div>
					</div>
					<div class="title line1 margin-bottom-xs">小米家用电饭煲小米家用电饭煲</div>
					<div class="price"><span class="label" style="background: rgb(233, 51, 35);">抢</span><span
							class="num-label" style="color: rgb(233, 51, 35);">￥</span><span class="num"
							style="color: rgb(233, 51, 35);">234</span></div>
				</div>

				<div class="list-item" style="margin-right: 10px;">
					<div class="img-box">


						<img width="100" height="100"
							src="https://img.alicdn.com/imgextra/i1/725677994/O1CN01OOdyGx28vIqlmfapD_!!725677994.jpg"
							alt="">

						<div class="discount" style="border-color: rgb(233, 51, 35); color: rgb(233, 51, 35);">
							1.2折起
						</div>
					</div>
					<div class="title line1 margin-bottom-xs">小米家用电饭煲小米家用电饭煲</div>
					<div class="price"><span class="label" style="background: rgb(233, 51, 35);">抢</span><span
							class="num-label" style="color: rgb(233, 51, 35);">￥</span><span class="num"
							style="color: rgb(233, 51, 35);">234</span></div>
				</div>
				<div class="list-item" style="margin-right: 10px;">
					<div class="img-box">


						<img width="100" height="100"
							src="https://img.alicdn.com/imgextra/i1/725677994/O1CN01OOdyGx28vIqlmfapD_!!725677994.jpg"
							alt="">

						<div class="discount" style="border-color: rgb(233, 51, 35); color: rgb(233, 51, 35);">
							1.2折起
						</div>
					</div>
					<div class="title line1 margin-bottom-xs">小米家用电饭煲小米家用电饭煲</div>
					<div class="price"><span class="label" style="background: rgb(233, 51, 35);">抢</span><span
							class="num-label" style="color: rgb(233, 51, 35);">￥</span><span class="num"
							style="color: rgb(233, 51, 35);">234</span></div>
				</div>

			</div>
		</div>




		<style>
			.home_pink {
				padding: 10px 12px;
				background: #fff;
				border-radius: 10px;
			}
			.home_pink .title-wrapper .left, .home_pink .title-wrapper {
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			}
			
			.home_pink .title-wrapper {
			    -webkit-box-pack: justify;
			    -ms-flex-pack: justify;
			    justify-content: space-between;
			}
			.home_pink .title-wrapper .left, .home_pink .title-wrapper {
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			}
			.home_pink .title-wrapper .left .icon {
			    width: 18px;
			    height: 18px;
			    border-radius: 50%;
			}
			.content img {
			    display: block;
			    max-width: 100%;
			    -o-object-fit: contain;
			    object-fit: contain;
			}
			
			.home_pink .title-wrapper .left span {
			    margin-left: 5px;
			    font-size: 16px;
			}
			
			}
			.home_pink .title-wrapper .left .avatar-wrapper {
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			    margin-left: 14px;
			}
			.home_pink .title-wrapper .left .avatar-wrapper img {
			    width: 15px;
			    height: 15px;
			    margin-left: -5px;
			    border: 1px solid #fff;
			    border-radius: 50%;
			}
			
			.home_pink .title-wrapper .left .num {
			    margin-left: 3px;
			    color: #999;
			    font-size: 13px;
			}
			.home_pink .list-wrapper {
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    margin-top: 10px;
			    overflow: hidden;
			}
			
			.home_pink .list-wrapper .item {
			    -ms-flex-negative: 0;
			    flex-shrink: 0;
			    width: 110px;
			    background: #fff;
			    border-radius: 8px;
			}
			
			.home_pink .list-wrapper .item .img-box {
			    position: relative;
			    width: 100%;
			    height: 110px;
			}
			
			.home_pink .list-wrapper .item .img-box .num {
			    position: absolute;
			    left: 6px;
			    top: 6px;
			    width: 70px;
			    height: 16px;
			    line-height: 16px;
			    text-align: center;
			    background: rgba(0,0,0,.1);
			    -webkit-box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 6%);
			    box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 6%);
			    border-radius: 8px;
			    color: #fff;
			    font-size: 12px;
			}
			
			
			.home_pink .list-wrapper .item .info {
			    padding: 5px 7px;
			}
			
			.home_pink .list-wrapper .item .info .title {
			    font-size: 12px;
			    color: #282828;
			}
			.line1, .line2 {
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			
			.home_pink .list-wrapper .item .info .price {
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			}
			.home_pink .list-wrapper .item .info .price .label {
			    display: inline-block;
			    height: 20px;
			    line-height: 20px;
			    padding: 0 3px;
			    margin-right: 3px;
			    font-size: 9px;
			    font-weight: 400;
			    text-shadow: 1px 1px 4px rgb(0 0 0 / 6%);
			    color: #f44;
			}
			.home_pink .list-wrapper .item .info .price .num {
			    color: #f44;
			    font-size: 16px;
			    font-weight: 700;
			}
			
			.home_pink .list-wrapper .item .info .price .num span {
			    font-size: 12px;
			}
			.home_pink .list-wrapper .item .btn {
			    width: 110px;
			    height: 24px;
			    -webkit-box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 6%);
			    box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 6%);
			    border-radius: 0 0 8px 8px;
			    text-align: center;
			    line-height: 24px;
			    color: #fff;
			}
			
			 
			
		</style>

		<div  class="home_pink" style="background: rgb(255, 255, 255); margin-top: 0px;">
			<div  class="title-wrapper">
				<div  class="left"><img 
						src="http://pro.crmeb.net/static/images/group02.gif" alt="" class="icon" draggable="false"><span
						>拼团活动</span>
					<div  class="avatar-wrapper margin-left"><img 
							src=""
							alt="" draggable="false"><img 
							src=""
							alt="" draggable="false"></div>
					<p  class="num">1234人拼团成功</p>
				</div>
				<div  class="right">更多</div>
			</div>
			<div  class="list-wrapper flex-wrap"  style="overflow-x: scroll;">
				<div  class="item" style="margin-right: 10px;">
					<div  class="img-box">
					<img width="100" height="100"
						src="https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg" class="radius">
					
								 
						<div  class="num">1234参团</div>
					</div>
					<div  class="info">
						<div  class="title line1">娇诗茹 ulzzang原宿风学生潮韩版春夏短</div>
						<div  class="price"><span  class="label"
								style="background: rgba(255, 68, 68, 0.1); color: rgb(233, 51, 35);">拼团价</span>
							<p  class="num" style="color: rgb(233, 51, 35);"><span
									>￥</span>
								234
							</p>
						</div>
					</div>
					<div  class="btn" style="background: rgb(233, 51, 35);">参与拼团</div>
				</div>
				
				<div  class="item" style="margin-right: 10px;">
					<div  class="img-box">
					<img width="100" height="100"
						src="http://img.zcool.cn/community/017a4e58b4eab6a801219c77084373.jpg"
						class="radius">
					
								
								
						<div  class="num">1234参团</div>
					</div>
					<div  class="info">
						<div  class="title line1">潘歌针织连衣裙</div>
						<div  class="price"><span  class="label"
								style="background: rgba(255, 68, 68, 0.1); color: rgb(233, 51, 35);">拼团价</span>
							<p  class="num" style="color: rgb(233, 51, 35);"><span
									>￥</span>
								234
							</p>
						</div>
					</div>
					<div  class="btn" style="background: rgb(233, 51, 35);">参与拼团</div>
				</div>
				
				
				
				

			</div>
		</div>













	</body>
	<script>
		window.onload = function() {
			//屏蔽键盘事件

		}
	</script>
</html>
